<!--
***个人中心入口***
-->
<template>
  <div class="disribution-main">
    <p class="disribution-title">潮货分销商</p>
    <p class="disribution-des">{{text}}</p>
    <p class="disribution-buttom" @click="goCommodityCenter">{{buttomText}}</p>
  </div>
</template>

<script>
import { isDistribution } from '../../common/api/distribution'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      buttomText: '申请成为买手',
      text: '和好友分享潮流商品，赚取佣金',
      url: '/distribution/apply'
    }
  },
  computed: {
    ...mapGetters({
      user: 'userInfo'
    })
  },
  created() {
    isDistribution()
      .then(res => {
        if (res.type === 1) {
          this.buttomText = '进入潮货中心'
          this.text = `本月订单：${res.ordertotal}单；预估收入：¥${res.moneycount}`
          this.url = '/distribution'
          window.localStorage.setItem('distributionId', res.distributionid)
        } else {
          window.localStorage.removeItem('distributionId')
          if (res.mark === '0') {
            this.url = '/distribution/apply'
          } else {
            this.url = '/distribution/product'
          }
        }
      })
      .catch(e => {
        console.error('isDistribution error', e)
      })
  },
  methods: {
    goCommodityCenter() {
      this.$router.push(this.url)
    }
  }
}
</script>
<style lang='scss' scoped>
.disribution-main {
  width: 90%;
  height: 21.6vw;
  padding-left: 4.6vw;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.1);
  margin-bottom: 10px;
  border-radius: 4px;
  position: relative;
  top: -14vw;
}
.disribution-title {
  margin-top: 4vw;
  font-size: 14px;
  font-weight: bold;
  color: rgb(51, 51, 51);
}
.disribution-des {
  font-size: 12px;
  color: rgb(153, 153, 153);
  position: absolute;
  bottom: 4.5vw;
  left: 4.6vw;
}
.disribution-buttom {
  width: 26vw;
  height: 6.4vw;
  background: #333;
  border-radius: 3.2vw;
  position: absolute;
  top: 4vw;
  right: 4vw;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.2vw;
}
</style>
